<template>
    <div>
        <!-- 树形菜单 -->
        <el-aside width="220px" style="background-color: rgb(238, 241, 246); background: #fff">
            <el-menu :default-openeds="['1', '3']">
                <el-tree :data="tree_list" :default-expanded-keys="treeExpandData" node-key="areaCode"
                    :highlight-current="true" :props="{
                        checkStrictly: true,
                        label: 'areaName',
                        children: 'child',
                        value: 'areaCode',
                    }" @node-click="handleNodeClick" ref="treeBox"></el-tree>
            </el-menu>
        </el-aside>
    </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import { getDefault } from "../assets/js/getcampusList";
export default {
    setup(props, ctx) {
        let { proxy } = getCurrentInstance();
        // 获取右边树形
        const tree_list = ctx.attrs.list;
        console.log(tree_list);
        const type = ctx.attrs.type;
        const defaultAreaCode = ref(ctx.attrs.areaCode);
        const treeExpandData = ctx.attrs.type == 3 ? [] : getDefault(tree_list);
        // console.log(type);
        // const treeExpandData = ref([]);
        const treeBox = ref("");
        if (tree_list.length > 0) {
            nextTick(function () {
                // type等于是表示楼栋，默认高亮显示地区码为八位数
                if (type == 1) {
                    const queryAreaCode =
                        ctx.attrs.queryAreaCode ||
                        treeExpandData[treeExpandData.length - 2];
                    treeBox.value.setCurrentKey(queryAreaCode);
                } else {
                    console.log(defaultAreaCode.value)
                    if (defaultAreaCode.value) {
                        nextTick(function () {
                            treeBox.value.setCurrentKey(defaultAreaCode.value);
                        });
                    } else {
                        // 默认高亮显示第一个子节点
                        const queryAreaCode =
                            ctx.attrs.queryAreaCode ||
                            treeExpandData[treeExpandData.length - 1];
                        treeBox.value.setCurrentKey(queryAreaCode);
                    }
                }
            });
        }

        const handleNodeClick = (res) => {
            ctx.emit("handleNodeClick", res);
        };
        return {
            treeBox,
            tree_list,
            proxy,
            treeExpandData,
            handleNodeClick,
        };
    },
};
</script>
<style scoped>
.el-dropdown-menu,
.el-menu {
    position: absolute;
    height: 100%;
    overflow: auto;
    width: 220px;
    z-index: 99;
    top: 0;
}

.el-tree {
    width: 255px;
    background: #fff;
    color: #606266;
    overflow-x: auto;
}
</style>
  